<template>
    <el-tabs v-model="activeTab" style="margin-left: 50px;width:70%">
        <el-tab-pane label="话费充值" name="first">
            <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="createTime" label="日期" width="250px">
                </el-table-column>
                <el-table-column prop="totalPrice" label="充值金额" width="200px">
                </el-table-column>
                <el-table-column prop="payPrice" label="支付金额" width="200px">
                </el-table-column>
                <el-table-column prop="isInvoice" label="发票开具状态" width="200px"
                    :formatter="row => row.isInvoice === 0 ? '未开具' : '已开具'">
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button v-if="scope.row.isInvoice === 0" type="text"
                            @click="handleInvoice(scope.row)">开具</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-col :span="12">
                <!-- 放分页部分 -->
                <el-pagination background :page-sizes="[3, 5, 10, 20]" :page-size="pageSize" :current-page="pageNum"
                    layout="total, sizes, prev, pager, next" @next-click="nextPage" @prev-click="prevPage"
                    @size-change="sizeChange" @current-change="currentPage" :total="total"></el-pagination>
            </el-col>
        </el-tab-pane>
        <el-tab-pane label="流量充值" name="second">流量充值

        </el-tab-pane>
        <el-tab-pane label="宽带充值" name="third">宽带充值

        </el-tab-pane>
      
        <!-- 遮罩 -->
        <div v-loading="loading">
            <!-- 其他元素... -->
        </div>
    </el-tabs>
</template>

<script>
export default {
    data() {
        return {
            activeTab: 'first',
            tableData: [

            ],
            pageNum: 1,
            pageSize: 5,
            total: 0,
            user: {

            },
            orderParam: {
                userTelephone: ''
            },
            loading: false,
            orderNum: '',
            dialogVisible:false,
            id:'',
            src:""
        }
    },
    methods: {
        prevPage(val) {
            //点击上一页触发
            this.pageNum = val;
            this.queryAllOrder();
        },
        nextPage(val) {
            //点击下一页触发
            this.pageNum = val;
            this.queryAllOrder();
        },
        sizeChange(val) {
            //val每一页条数
            this.pageNum = 1;
            this.pageSize = val;
            this.queryAllOrder();
        },
        currentPage(val) {
            this.pageNum = val;
            this.queryAllOrder();
        },
        queryCondition() {
            this.pageNum = 1;
            this.queryAllOrder();
        },
        queryAllOrder() {
            //带分页参数pageNum,pageSize
            let pageParam = {};
            pageParam.pageNum = this.pageNum;
            pageParam.pageSize = this.pageSize;
            pageParam.param = this.orderParam;
            this.$axios.post('api/productOrder/queryAllOrder', pageParam)
                .then(res => {
                    if (res.data.code == 200) {
                        let pageData = res.data.data;
                        this.tableData = pageData.records;
                        //给分页参数赋值
                        this.total = pageData.total;
                        this.pageNum = pageData.current;
                        this.pageSize = pageData.size;
                    }
                })
        },

        queryUser() {
            let param = new URLSearchParams();
            param.append("phone", this.orderParam.userTelephone);
            this.$axios.post('api/zgyd-user/queryUser', param)
                .then(res => {
                    if (res.data.code == 200) {
                        this.user = res.data.data
                    }
                })
        },
        handleInvoice(row) {
            let param = {};
            param.orderId = row.idStr;
            param.userEmail = this.user.email;
            param.serverName = "话费充值";
            param.type = "话费";
            param.typeId = row.typeId;
            param.totalPrice = row.payPrice + "";
            param.status = row.status + "";
            param.isInvoice = row.isInvoice
            param.name = this.user.account;
            this.orderNum = row.idStr;
            // 开启遮罩
            this.loading = true;
            this.$axios.post('api/staffOrder/generationBill', param, { responseType: 'blob' })
                .then(res => {
                    const url = window.URL.createObjectURL(new Blob([res.data]));
                    const link = document.createElement('a');
                    link.href = url;
                    link.setAttribute('download', 'file.pdf'); // 这里的 'file.pdf' 是你的文件名
                    document.body.appendChild(link);
                    link.click();
                    link.remove();
                    this.updateIsInvoiceStatus();
                    this.$message.success("已推送至您的邮箱")
                })
                .catch(error => {
                    // 这里处理错误
                    console.log(error);
                })
                .finally(() => {
                    // 关闭遮罩
                    this.loading = false;
                });
        },

        //修改开具发票状态
        updateIsInvoiceStatus() {
            this.$axios.get('/api/productOrder/updateIsInvoiceStatus?orderNum=' + this.orderNum)
                .then(res => {
                    if (res.data.code == 200) {
                        this.queryAllOrder();
                    }
                })
        },
    },
    created() {
        this.orderParam.userTelephone = localStorage.getItem("username");
        this.queryAllOrder()
        this.queryUser()
    }
}
</script>

<style scoped>
.mask {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 20px;
}
</style>
